<script lang="ts" setup>
import {defineProps} from 'vue'

const props=defineProps({
    title:{//标题
        type: String,
        default:''
    },
    value:{
        type:String,
        default:''

    },
    info:{//提示信息
        type: String,
        default:'' 
    },
    perpercentage_title:{//百分比标题
        type:String,
        default:''
    },
    percentage:{//百分比
        type:String,
        default:''
    }

})
</script>

<template>
    <div class="statistic-card">
          <el-statistic :value="props.value" precision="2" prefix="" value-style="font-size:30px">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                {{props.title}}
                <el-tooltip effect="dark" :content="props.info" placement="top">
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div v-if="props.percentage!=''" class="statistic-footer">
            <div class="footer-item">
              <span>{{ props.perpercentage_title}}</span>
              <span class="green">
                {{props.percentage}}%
                <el-icon>
                  <CaretTop />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
</template>



<style lang="scss" scoped>
.statistic-card {
  // height: 150px;
  padding: 20px;
  border-radius: 20px;
  background-color:rgb(247, 249, 249);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}
</style>